<template>
  <div class="roleGrant">
    <div style="float:left;width:90%;padding:0 5%;margin-bottom:50px">
      <p class="name">角色名称:{{personalrole.roleName}}</p>
      <p class="sehzhi">权限设置:</p>
      <ul id="treeDemo" class="ztree"></ul>
    </div>
    
    <div class="grant-foot">
      <el-button class="select-submit" @click="save">保存</el-button>
      <el-button @click="closeLayer" class="colse">关闭</el-button>
    </div>
  </div>
</template>

<script>
import "../../static/js/jquery.ztree.core.min.js";
import "../../static/js/jquery.ztree.excheck.min.js"; //带checkbox
import axios from "axios";
export default {
  name: "roleGrant",
  props: ["personalrole"],
  data() {
    return {
      setting: {
        check: {
          //设置 zTree 的节点上是否显示 checkbox / radio
          enable: true
        },
        data: {
          simpleData: {
            enable: true
            // rootPId: 0,
          }
        },
        callback: {
          onCheck: this.onCheck
        }
      },
      zNodes: [],
      checked: []
    };
  },
  mounted: function() {
    this.$nextTick(() => {
      // console.info(JSON.parse(JSON.stringify(this.personalrole)));
      this.getGrentList(); //获取指定角色权限树
    });
  },
  methods: {
    //关闭layer弹窗
    closeLayer() {
      layer.closeAll();
    },
    //ztree
    ztree() {
      $.fn.zTree.init($("#treeDemo"), this.setting, this.zNodes);
    },
    //获取指定角色权限树
    getGrentList() {
      axios
        .get(rolesPurviewTreeURL + '/' + this.personalrole.roleBh, {
          headers: { Authorization: appDB.get("userInfo").token }
        })
        .then(response => {
          let d = response.data;
          if (d.resultCode == 0) {
            this.zNodes = d.record;
            // console.info(this.zNodes)
            this.ztree(); //渲染ztree
          } else {
            layer.msg(d.msg);
          }
        })
        .catch(error => {
          layer.msg("网络错误");
        });
    },
    //获取选中的节点
    onCheck(e, treeId, treeNode) {
      let treeObj = $.fn.zTree.getZTreeObj("treeDemo"),
        nodes = treeObj.getChangeCheckedNodes(true);
      // console.info(nodes)
      let a = nodes.map(o => {
        return {
          id: o.id,
          checked: o.checked
        };
      });
      this.checked = a;
      // console.info(this.checked)
    },
    //保存授权
    save() {
      this.onCheck();
      axios
        .patch(
          rolesURL + "/" + this.personalrole.roleBh,
          {
            list: this.checked
          },
          {
            headers: { Authorization: appDB.get("userInfo").token }
          }
        )
        .then(res => {
          let d = res.data;
          if (d.resultCode == 0) {
            this.closeLayer();
            this.getGrentList();
          } else {
            layer.msg(d.msg);
          }
        })
        .catch(error => {
          layer.msg("网络错误");
        });
    }
  }
};
</script>

<style scoped>
.roleGrant {
  width: 100%;
  float: left;
}
.name {
  width: 100%;
  float: left;
  font-size: 16px;
  color: #000;
  padding: 20px 0;
}
.sehzhi {
  width: 20%;
  padding: 20px 0;
  float: left;
  font-size: 16px;
  color: #000;
}
.ztree {
  width: 70%;
  padding: 20px 5%;
  float: left;
  text-align: center;
}
.grant-foot {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 8px 0;
  border-top: 1px solid #c9c9c9;
  float: left;
  background: #fff;
  z-index: 222;
}
.colse {
  border: 0;
  background: #cecece;
  border-radius: 30px;
  padding: 8px 40px;
  float: right;
  margin-right: 30px;
}
.select-submit {
  border-radius: 30px;
  padding: 8px 40px;
  background: #39b423;
  border: 1px solid #39b423;
  color: #fff;
  float: right;
  margin-right: 30px;
}
</style>


